<template>
  <div class="flex flex-col items-center justify-center">
    <h2 class="text-xl font-semibold mb-4">GeoGebra画布</h2>
    <div
      id="ggb-element"
      ref="ggbContainer"
      style="width: 800px; height: 600px; border: 1px solid #ccc"
    ></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import axios from 'axios';

const props = defineProps({
  onReady: {
    type: Function,
    default: null
  }
});

const ggbContainer = ref(null);
const ggbApp = ref(null);
let intervalId = null;

// 初始化 GeoGebra
const initGeoGebra = () => {
  const script = document.createElement('script');
  script.src = 'https://www.geogebra.org/apps/deployggb.js';
  script.onload = () => {
    const params = {
      appName: 'geometry',
      width: 800,
      height: 600,
      showToolBar: true,
      showAlgebraInput: true,
      showMenuBar: true,
      enableLabelDrags: true,
      enableShiftDragZoom: true,
      capturingThreshold: null,
      showResetIcon: true,
      language: 'zh',
      materialId: null
    };

    const app = new window.GGBApplet(params, true);
    app.inject(ggbContainer.value?.id || 'ggb-element');
    ggbApp.value = app;
    props.onReady?.(app);
  };
  document.body.appendChild(script);
};

// 设置事件监听器
const setupEventListeners = () => {
  intervalId = setInterval(() => {
    try {
      const ggb = window.ggbApplet;
      if (ggb && typeof ggb.registerAddListener === 'function') {
        // 添加对象监听
        ggb.registerAddListener((objName) => {
          const command = ggb.getCommandString(objName);
/*           axios.post('/actions', {
            action: 'add',
            object: objName,
            command
          }); */
        });

        // 更新对象监听
        ggb.registerUpdateListener((objName) => {
          const xml = ggb.getXML(objName);
/*           axios.post('/actions', {
            action: 'update',
            object: objName,
            xml
          }); */
        });

        // 删除对象监听
        ggb.registerRemoveListener((objName) => {
/*           axios.post('/actions', {
            action: 'remove',
            object: objName
          }); */
        });

        // 点击对象监听
        ggb.registerClickListener((objName) => {
/*           axios.post('/actions', {
            action: 'click',
            object: objName
          }); */
        });

        // 客户端事件监听
        ggb.registerClientListener((event) => {
/*           axios.post('/actions', {
            action: 'client_event',
            event
          }); */
        });

        clearInterval(intervalId);
      }
    } catch (err) {
      console.log('等待 ggbApplet 初始化...');
    }
  }, 500);
};

onMounted(() => {
  initGeoGebra();
  setupEventListeners();
});

onBeforeUnmount(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
  
  // 清理 GeoGebra 资源
  if (ggbApp.value) {
    // ggbApp.value.remove();
  }
  
  // 移除脚本
  const scripts = document.querySelectorAll('script[src="https://www.geogebra.org/apps/deployggb.js"]');
  scripts.forEach(script => script.remove());
});
</script>

<style scoped>
/* 自定义样式 */
</style>
